
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
<head>
  <!--
    HUMANIZED MESSAGES FOR PROTOTYPE 1.0
    idea           - http://www.humanized.com/weblog/2006/09/11/monolog_boxes_and_transparent_messages
    jquery version - http://humanmsg.googlecode.com
    home           - http://code.google.com/p/humanmsg-prototype/
  -->

  <title>Humanized Messages - Demo</title>
  <script type="text/javascript" src="prototype/prototype.js"></script>
  <script type="text/javascript" src="scriptaculous/scriptaculous.js"></script>
  <script type="text/javascript" src="humanmsg.js"></script>
  <link href="humanmsg.css" media="screen" type="text/css" rel="stylesheet">

  <script>

  document.observe('dom:loaded', function() {
    $$('a.showmessage').invoke('observe', 'click', function(event) {
      humanMsg.displayMsg('<strong>Success:</strong> <span class="indent">You clicked \''+Event.element(event).innerHTML+'\'</span>');
      return false;
    });
  });
  </script>

  <style>
    p.links {
      position: absolute;
      font: 2em Helvetica, Arial, Sans-Serif;
      top: 40%;
      left: 50%;
      width: 400px;
      margin-left: -200px;
      text-align: center;
    }

    p.links a {
      text-decoration: none;
      color: #888;
    }

    p.links a:hover {
      color: #222;
    }

    p.links a.home {
      font-size: 10px;
      line-height: 30px;
    }
  </style>
</head>

<body>

  <p class="links">
    <a href="#" class="showmessage">Klaatu</a>
    <a href="#" class="showmessage">Barada</a>
    <a href="#" class="showmessage">Nikto</a>
    <br />
    <a href="http://code.google.com/p/humanmsg-prototype/" class="home">Humanized Messages for Prototype</a>
  </p>

</body>
</html>
